<template>
	<view class="index">
		
		<!-- /////////////首页全局scroll-view组建//////////// -->
		
		<scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="scrollIntoIndex">
			<view :id="'top'+index" @tap="changeTab(index)" class="scroll-item" v-for="(item,index) in topBar" :key="item.id">
				<text :class="topBarIndex===index?'f-active-color':'f-color'">{{item.name}}</text>
			</view>
		</scroll-view>
		
		<swiper @change="onChangeTab" :current="topBarIndex" :style="'height:'+clientHeight+'px;'"><!--  :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" -->
			<swiper-item v-for="(item,index) in topBar" :key="item.id">
				<!-- /////////////推荐模板////////////// -->
				<view class="home-data">
					<IndexSwipper/>
					<Recommend/>
					<Card cardTitle="猜你喜欢"/>
					<CommodityList/>
				</view>
			</swiper-item>
		</swiper>
		
		
		
		<!-- /////////////其他模板////////////// -->
		<!-- <Banner />
		<Icons />
		<Card cardTitle="热销爆品"/>
		<Hot/>
		<Card cardTitle="推荐店铺"/>
		<Shop />
		<Card cardTitle="为您推荐"/>
		<CommodityList/> -->
		
	</view>
</template>

<script>
import IndexSwipper from "@/components/index/IndexSwiper.vue"
import Recommend from "@/components/index/Recommend.vue"
import Card from "@/components/common/Card.vue"
import CommodityList from "@/components/common/CommodityList.vue"
import Banner from "@/components/index/Banner.vue"
import Icons from "@/components/index/Icons.vue"
import Hot from "@/components/index/Hot.vue"
import Shop from "@/components/index/Shop.vue"
export default {
	data() {
		return {
			topBarIndex:0,////选中的索引
			scrollIntoIndex:"top0",//////顶栏跟随的索引id值
			clientHeight:0,////内容块的高度值
			//菜单项
			topBar:[
				{
					id:0,
					name:'推荐'
				},
				{
					id:1,
					name:'运动户外'
				},
				{
					id:2,
					name:'服饰内衣'
				},
				{
					id:3,
					name:'鞋靴箱包'
				},
				{
					id:4,
					name:'美妆个护'
				},
				{
					id:5,
					name:'家居数码'
				},
				{
					id:6,
					name:'食品母婴'
				},
				{
					id:7,
					name:'手机数码'
				},
				{
					id:8,
					name:'钟表首饰'
				},
				{
					id:9,
					name:'家电家装'
				},
				{
					id:10,
					name:'游戏娱乐'
				},
				{
					id:11,
					name:'乐器乐谱'
				},
				{
					id:12,
					name:'摄影摄像'
				}
			]
		}
	},
	components: {
		IndexSwipper,
		Recommend,
		Card,
		CommodityList,
		Banner,
		Icons,
		Hot,
		Shop
	},
	onLoad() {
	},
	onReady(){
		const element=uni.createSelectorQuery().select(".home-data")
		element.boundingClientRect(data=>{
			console.log("得到布局位置信息" + JSON.stringify(data));
			this.clientHeight=data.height
		}).exec();
	},
	methods: {
		changeTab(index){
			if(this.topBarIndex===index)return
			this.topBarIndex=index;
			this.scrollIntoIndex="top"+index;
		},
		onChangeTab(e){
			this.changeTab(e.detail.current)
		}
	}
}
</script>

<style scoped>
.scroll-content{
	width: 100%;
	height: 80rpx;
	white-space: nowrap;
}	
.scroll-item{
	display: inline-block;
	padding: 10rpx 30rpx;
	font-size: 32rpx;
}
.f-active-color{
	padding: 10rpx 0;
	border-bottom: 6rpx solid #49bdfb;
}
</style>
